import React,{useEffect} from 'react'
import {useDispatch,useSelector} from 'react-redux'
import {getShopcartAsync} from '@/store/modules/shopcartSlice'

export default function ShopcartList() {
    const dis=useDispatch()
    const getShpcartList=()=>{
        dis(getShopcartAsync)
    }
    const shopcarModule=useSelector(state=>state.shopcartKey)
    useEffect(()=>{getShpcartList()},[])
  return (
    <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>图片</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        {
          shopcarModule.shopcartList.map(item=><tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.pname}</td>
            <td>
              <img src={item.pic} alt=""  style={{width:'80px'}}/>
            </td>
            <td>{item.price}</td>
            <td>
                
              </td>
            <td>{item.price*item.num}</td>
          </tr>)
        }
      </tbody>
    </table>
</div>
  )
}
